<style lang="scss" scoped>
	.n-main{
		width: 100%;
		overflow: hidden;
		height: 100%;
		background: $theme-bg-white2;
		@include n-row2;
		padding: 20px;
		gap:30px;
		align-items: stretch;
		::v-deep .n-slideMenu{
			z-index: 2;
		}
		::v-deep .n-main-right{
			flex: 1;
			width: 0;
			@include n-col1;
			z-index: 1;
			align-items: stretch;
			
			>main{
				height: 0;
				flex: 1;
				overflow: auto;
				
			}
			
		}
		 
		.anim-enter{
			transform: translate(10%);
			opacity: 0.3;
		}
		.anim-enter-active{
			transform-style:preserve-3d;
		    transition: all 0.3s ;
		}
		.anim-enter-to{
			transform: translate(0%);
			opacity: 1;
		}
		.anim-leave{
			transform: translate(0%);
		    opacity: 1;
		}
		.anim-leave-active{
			transform-style:preserve-3d;
		    transition: all 0.3s ;
		    
		}
		.anim-leave-to{
			transform: translate(10%);
			opacity: 0.1;
		}
		
		.n-main-crumbs{
			@include n-row1;
			font-size: 14px;
			color: var(--theme-text2);
			gap:10px;
			.n-main-crumbs-item{
				&:last-child{
					cursor: pointer;
					color: var(--theme-text5);
					&:hover{
						color: $theme-color;
					}
				}
			}
			.n-main-crumbs-i{
				color: var(--theme-text6);
			}
		}
		::v-deep .n-nav{
			z-index: 20;
			padding: 0 12px;
			box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.07);
			padding-bottom: 10px;
			gap:25px;
			background: $theme-bg-white2;
			box-shadow: none;
			
			.n-nav-icon{
				width: 50px;
				height: 50px;
				border-radius: 10px;
				background: $theme-bg-white1;
				font-size: 22px;
				color: $theme-text2;
				@include n-row2;
			}
			
			.n-nav-check,.n-nav-icon:hover{
				text-shadow: none;
				background: $theme-bg-white4;
			}
			.n-nav-user{
				height: 50px;
				border-radius: 10px;
				color: $theme-text2;
				padding: 0 15px;
				background: $theme-bg-white1;
				.n-nav-user-info{
					>img,>i{
						width: 30px;
						height: 30px;
						color: $theme-text5;
						border-radius: 50%;
						margin-right: 10px;
						box-shadow: none;
					}
					>i{
						font-size: 30px;
					}
					>div{
						flex: 1;
						white-space: nowrap;
						color: $theme-text2;
						>h3{
							font-size: 15px;
							&::after{
								margin-left: 10px;
								display: inline-block;
								font-weight: bold;
								content: "\e6df";
								font-family: "element-icons" !important;
							}
						}
						
					}
				}
				&:hover .n-nav-user-info{
					text-shadow: none;
				}
				
			}
			>.el-icon-s-fold,>.el-icon-s-unfold{
				display: none;
			}
		}
		::v-deep .n-slideMenu{
			height: 0;
			flex: 1;
			background: none;
			box-shadow: none;
			.n-slideMenu-title{
				display: none;
			}
			.n-menu-node{
				padding: 0 16px;
				font-size: 15px;
				&+.n-menu-node{
					margin-top: 15px;
				}
			}
			.n-menu-node-focus{
				color: inherit;
			}
			.n-menu-sub{
				margin-top: 15px;
				.n-menu-node{
					padding-left: 0;
				}
			}
			.n-menu-node-line{
				height: 45px;
				border-radius: 10px;
				>span>i{
					font-size: 18px;
					flex: 0 0 40px;
					color: $theme-text3;
				}
				>i{
					margin-right: 17px;
				}
				&.n-menu-node-check{
					border-right: 0;
					position: relative;
					color: $theme-color;
					background:var(--theme-color-light9);
					&::after{
						top: 0;
						content: ' ';
						width: 4px;
						height: 100%;
						position: absolute;
						border-radius: 2px;
						left: calc(100% + 12px);
						background: currentcolor;
					}
				}
			}
		 
			
			.n-menu-sub{
				background: none;
			}
			.n-menu{
				background: none;
				box-shadow: none;
			}
			&.n-slideMenuExpand{
				width: 100%;
			}
		}
		 
		.n-main-slide{
			padding: 40px 0 30px 0;
			background: $theme-bg-white1;
			border-radius: 25px;
			@include n-col1;
			align-items: stretch;
			width: 200px;
			box-shadow:  0 0 15px 1px $theme-shadow2;
			>header{
				padding: 0 16px;
				@include n-row1;
				margin-bottom: 40px;
			}
			>footer{
				padding: 0 16px;
				margin-top: 70px;
			}
			
			.n-main-slide-item{
				@include n-row1;
				cursor: pointer;
				font-size: 15px;
				border-radius: 10px;
				margin-top: 30px;
				height: 45px;
				@include n-row1;
				color: $theme-text3;
				&:hover{
					background: var(--theme-color-light9);
				}
				>i{
					@include n-row2;
					width: 40px;
					font-size: 18px;
				}
			}
		}
		.n-main-logo{
			width: 50px;
			height: 50px;
			background: $theme-color;
			border-radius: 10px;
			font-weight: bold;
			font-size: 20px;
			color: #fff;
			@include n-row2;
		}
    .n-logo-png{
      height: 50px;
    }
		.n-main-customer{
			margin: 0 auto;
			gap:15px;
			border-radius: 25px;
			padding: 0 15px;
			width: 170px;
			height: 170px;
			@include n-col1;
			align-items: center;
			background: var(--theme-color-light9);
			>img{
				width: 100%;
				margin-top: -50px;
			}
			::v-deep >button{
				height: 50px;
				@include n-row2;
				width: 100%;
				font-size: 17px;
				border-radius: 10px;
				>i{
					font-size: 24px;
				}
			}
		}
		
		
	}
</style>

<template>
	<div class="n-main " v-loading="loading">
		<div class="n-main-slide">
			<header>
        <img src="@/assets/img/logo.png" class="n-logo-png" alt="">
      </header>
			<n-slide-menu ref="slide" :conf="slideConf" />
			<footer>
<!--				<div class="n-main-customer" @click="customerConf.props.show = true" v-show="userType !== 1">-->
<!--					<img src="@/assets/img/1.png" />-->
<!--					<el-button icon="el-icon-chat-square" type="primary">在线支持</el-button>-->
<!--				</div>-->
				
				<div v-if="$store.tokenInfo" class="n-main-slide-item" @click="logout"><i class="fa fa-sign-out"></i>退出登录</div>
				<div v-else class="n-main-slide-item" @click="login"><i class="el-icon-user"></i>登录</div>
			</footer>
			
		</div>
		
		<div class="n-main-right">
			<n-nav ref="nav" @share="share" :params="params" @login="login" v-show="showFrame"  @logout="logout"       :compList="navCompList"   >
				<template #crumbs>
					<ul class="n-main-crumbs">
						<template v-for="item,idx in crumbs" >
							<li class="n-main-crumbs-item" :key="item.key">{{item.label}}</li>
							<li class="n-main-crumbs-i" v-if="idx < crumbs.length - 1" :key="item.key + '2'" >/</li>
						</template>
					</ul>
				</template>
				
			</n-nav>
			<main>
				<transition  name="anim"  mode="out-in">
					<n-keep-alive :getCacheKey="getCacheKey" @init="({vm})=> keepVm = vm"  k="PAGES" :include="incluedAliveRoutes">
						<router-view  v-if="showRoute" :key="k"></router-view>
					</n-keep-alive>
				</transition>
				
			</main>
		</div>
		<n-handle class="n-page-dialog" :conf="customerConf.props" ref="customer" :compList="customerConf.compList" :btns="customerConf.btns"  @ok="customer"  :form="customerConf.form" >
			
			<template #img >
				<img style="width: 100%;" src="@/assets/img/12.png" />
				<p style="color: var(--theme-text5); font-size: 13px; margin-top: 20px;">请描述您的问题，我们专家将在24小时内回复您</p>
			</template>

		</n-handle>
	</div>
</template>
	

<script>
  import store from '@/utils/store'
	import {getCacheKey,getTitle} from '@/router/index.js';
	
	export default{
		name: 'n-main',
		data(){
			const expandMenu = localStorage.expandMenu !== 'normal';
			window.m = this;
			return{
				id: this.$base.uuid(),
				userType : (this.$store.userInfo || {}).type,
				loading:false,
				keepVm: null,
				
				customerConf:{
					props:{title: '需要一些帮助？', type:'dialog', size:'600px'},
					form:{
						type:'',
						content:'',
					},
					compList:[
						{ type:'slot', slotName: 'img', cell:{props:{style:'margin-bottom:0'}} },
						{type: 'select', options: this.$enu.customerType, label: '问题主题', required:true, k: 'type'},
						{type: 'text', label: '描述', props:{type:"textarea", rows:1},  required:true, k: 'content'},
					],
					btns:[
						{ label: '发送请求', props:{type: 'primary'}, evKey: 'ok' },
					],
				},
				
				
				
				
				slideConf:{
					cur:'',
					indent: 5,
					expand:expandMenu,
					homeClick: ()=> this.$router.push('/pages'),
				},
				
				params:{
					userInfo:{},
					themeType: '',
				},
				expandMenu:  localStorage.expandMenu !== 'normal',
				navCompList:[
					{  type: 'slot', slotName: 'crumbs' },
					{ type: 'icon', right:1, mark: 1, icon: 'el-icon-bell', evKey: 'showMsg' },
					{ type: 'icon',  showFunc: ()=> !this.$store.tokenInfo, icon: 'el-icon-user', evKey: 'login' },
					{
						type: 'user',
						show:false,
						k: '_user',
						userInfoKey:'userInfo',
						showFunc: ()=> this.$store.tokenInfo,
						options: ( this.$enu['__other-nav-userPop'] = [
							
							{label: '推广用户', value: 'share', evKey: 'share', showFunc: ()=> this.userInfo.type === 4},
							{label: '退出', value: 'logout', evKey: 'logout'},
						] )
					},
				],
				showFrame: true,
				showRoute:true,
				aliveRoutes:[],
				crumbs:[],
			}
		},
		
		
		computed: {
			i18nMenu(){
				return this.navCompList.find(v=> v.k === 'i18nType');
			},
			userInfo(){
				const {name = '游客', user_id, avatar = 'https://img2.baidu.com/it/u=2314829636,2475305228&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737046800&t=afadc250b63ea19aad2456b5443b3218', type } = this.$store.userInfo || {}
				const userInfo = this.params.userInfo =  {name , avatar, type,user_id };
				return userInfo;
			},
			themeMenu(){
				return this.navCompList.find(v=> v.k === 'themeType');
			},
			userMenu(){
				return this.navCompList.find(v=> v.k === '_user');
			},
			incluedAliveRoutes(){
				return this.$Vue.observable( this.$base.arr.filterMap(this.aliveRoutes,  v=> this.getCacheKey(v) && v.key ) );
			},
			k(){
				return this.getCacheKey(this.$route) || undefined;
			}
			
		},
		watch: {
			'slideConf.cur'(v,v2){
				v && v !== v2 && this.addNavTag(this.slideConf)
			},
			'$route':{
				immediate:true,
				handler(v1,v2){
					this.slideConf.cur =  this.getCacheKey(v1) || v1.path;
					this.getCrumbs();
					
					if(!v2 || v1.path === v2.path && v1.fullPath !== v2.fullPath) this.$bus.emit('mainPage:addAliveRoutes',v1 );
				}
			},
			
			expandMenu(v,v2){
				if(v === v2) return;
				this.slideConf.expand = v;
				localStorage.setItem( 'expandMenu', v ? 'expand' : 'normal');
			},
		},
		created(){
			this.userInfo;
			
			this.$bus.on('mainPage:addAliveRoutes', r=>{
				if(!r || r.meta && (r.meta.__isPlaceholder || r.meta.__isLayout)) return;
				r = {...r, key: this.getCacheKey(r) || r.path, label: this.getTitle(r)};
				!this.aliveRoutes.some(v=> v.key === r.key) && this.aliveRoutes.push(r);
			})
			this.$bus.on('mainPage:showFrame', v=>	this.showFrame = v )
			this.$bus.on('mainPage:getAliveRoutes', ()=> this.aliveRoutes )
			this.$bus.on('mainPage:getVm', ()=> this );
			
		},
		beforeDestroy(){
			this.clearCache();
			this.$bus.emit('slideMenu:setMenu',[] ) 
			this.$bus.un('mainPage:addAliveRoutes')
			this.$bus.un('mainPage:showFrame')
			this.$bus.un('mainPage:getAliveRoutes')
			this.$bus.un('mainPage:getVm')
		},
		mounted(){
			this.getMenuRoute();
			
		},
		methods:{
			async share(){
				const url = `${this.$conf.rootPath}/#/pages/marketing?_shareId=${this.userInfo.user_id}`;
				
				const res = await this.$confirm( url, this.$t('复制推广链接') ).then(r => 1).catch(e => 0);
				if(!res) return;
				this.$base.dom.copyText(url);
				this.$msg('复制成功')
			},
			customer(){
				if(!this.$refs.customer.verif()) return
				this.$msg('发送成功');
				const {form,props} = this.customerConf;
				props.show = false;
				form.content = '';
			},
			login(){
				this.$router.push(`/login?redirect=${ this.$route.fullPath }`)
			},
			async logout() {
				const res = await this.$confirm( this.$t(`确定退出登录吗？`), this.$t('退出登录') ).then(r => 1).catch(e => 0)
				if (!res) return
				this.$auth.logout();
				this.$router.push(`/login?redirect=${this.$route.fullPath}`)
			},
			
			getCrumbs(){
				const arr = this.$base.params.getTreePath({ data: this.slideConf.options, id: this.slideConf.cur,  props:{id: 'key'}  }) || [];
				if(!arr[0] || arr[0].label !== '首页') arr.unshift({label: '首页', key: '/pages'});
				this.crumbs = arr;
			},
			
			addNavTag(conf){
				const {cur,options:data} = conf;
				
				let item = this.$base.params.getTreePath({ data, id:cur,  props:{id: 'key'}  });
				item = item && item.pop();
				if(!item) return;
					
				const r = item._route;
				let aliveRoute = {...r, ...this.$route};
				if(this.$route.path !== item.key) {
					aliveRoute = {...r};
					this.$router.push(item.key);
				}
				if(r.meta && (r.meta.__isPlaceholder || r.meta.__isLayout)) return;
				this.$bus.emit('mainPage:addAliveRoutes',aliveRoute )
			},
			// 获取菜单路由
			getMenuRoute() {
				let {routes} = this.$store;
				routes = (routes || []).find(v=> v.meta && v.meta.__isLayout);
				routes = routes && routes.children;
				this.menus = routes || [];
				this.$bus.emit('slideMenu:setMenu', this.menus )
				this.slideConf.cur =  this.getCacheKey(this.$route) || this.$route.path;
				this.$forceUpdate();
				this.getCrumbs();
			},
			clearCache(){
				this.keepVm && this.keepVm.clearCache();
			},
			
			 
			getCacheKey,
			getTitle,
		},
		
		
	}
	
	
</script>